h1{
    text-align: center;
}
h2{
  text-align: center;
}

p{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
    padding-left: 100px;
    padding-right: 100px;
}
.navbar {
    background-color: #007ba4; 
  }

#ror_complementary_form{
  display: flex;
  flex-direction: column;
  margin:auto;
  justify-content: center;
  align-items: center;
  background: #f3f3f3;
  padding: 2rem;
  border-radius: 10px;
  width:100%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  max-width: 1000px;
}

#ror_complementary_form #ror_form_spot {
  width: 100%;
  box-sizing: border-box;
}

#ror_complementary_form select {
  /* width: 100%; */
  box-sizing: border-box;
  max-width: 100%;
}

#ror_complementary_form label{
  display: block;
  margin-bottom: 0.5rem;
}

#ror_complementary_form button{
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 5px;
  background-color: #007ba4;
  color: white;
  font-size: 1rem;
  cursor: pointer;
    
}

#ror_complementary_form button:hover {
  background-color: #0199cc;
}


#field_number{
    display: flex;
}
table {
    width: 100%;
    border-collapse: collapse;
    /*margin: 20px 0;*/
    font-size: 18px;
    table-layout: auto;
  	word-wrap: break-word;
    border: 1px solid black;
  }
  
  /*table, th, td {
    
  }*/
  
  th, td {
    padding: 12px;
    outline: 0.5px solid #000;
    outline-offset: -1px; /* raccroche outline au bord */
  }

th{
    color: white;
		background-color:#007ba4;
 }

  .affiliations_OpenAlex{
    width:40%;
    border-collapse: collapse;
	border: 1px solid #ddd;
}
  
  /* Responsive table container */
  .table-responsive {
    overflow-x: auto;
  }
  
  /* Nested tables styling */
  .table-responsive table {
    width: 100%;
    min-width: 100%;
    margin-bottom: 20px;
  }
  
  @media screen and (max-width: 600px) {
    table, thead, tbody, th, td, tr {
      display: block;
    }
  
    thead tr {
      display: none;
    }
  
    td {
      position: relative;
      padding-left: 50%;
      white-space: pre-wrap;
    }
  
    td:before {
      content: attr(data-label);
      position: absolute;
      left: 0;
      width: 45%;
      padding-left: 10px;
      font-weight: bold;
    }

    .container_box {
      flex-direction: column;
      align-items: center;
  }

  .image-box, .content-box {
      max-width: 100%;
  }

  .overlay-box {
    flex-direction: column;
    align-items: center;
  }
  #form_spot {
    padding: 15px;
  }

  .expression-input {
    flex-direction: column;
    gap: 10px;
  }

  select {
    font-size: 14px;
  }

  .submit-btn {
    padding: 12px;
    font-size: 16px;
  }
  }

  @media (max-width: 500px) {
    #form_spot {
      padding: 10px;
    }
  
    select, input, button {
      font-size: 14px;
    }
    
    .submit-btn {
      padding: 10px;
    }
  }


#header_spot{
  margin-top: 100px;
}

.logo{
  width:200px;
}

#footer_spot{
  margin-top: 100px;
}

.tuto{
  display: flex;
  flex-direction: column;
  margin:auto;
  justify-content: center;
  align-items: start;
  text-align: left;
  padding: 2rem;
  width: 100%;
  max-width: 1000px;
}

.tuto-text {
  display: block; /* texte en flux normal */
  width: 100%;    /* pour rester bien aligné avec le reste */
}

/* Spinner styling */
.spinner {
  border: 8px solid #f3f3f3; /* Light grey background */
  border-top: 8px solid #007ba4; /* Blue top part of the spinner */
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite; /* Make it spin */
}

/* Define the spin animation */
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

input[type='submit']{
 padding: 0.75rem;
  border: none;
  border-radius: 5px;
  background-color: #007ba4;
  color: white;
  font-size: 1rem;
  cursor: pointer;
}

input[type='submit']:hover {
  background-color: #0199cc;
}

.error{
  color: red; 
  font-weight: bold;
}

.image_spacing{
   margin-right: 20px;
}


.input-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}

.input-wrapper input {
  flex: 1;
  border: none;
  padding: 8px 12px;
  outline: none;
  font-size: 1rem;
}

.input-wrapper button {
  background: none !important;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 1rem;
  color: #666 !important;
}

.input-wrapper button:hover {
  color: #000 !important;
}

#other_ror_signpost, #presentation, #search_choice, #thru_name, #icon-eye-off, 
#submit_button_02, #openalex_progression_dashboard_spot, 
#openalex_progression_dashboard_container,#openalex_end_result_dashboard_spot,#hidden_anchor{
  display: none;
}